<script lang="ts" setup>
import { ref } from "vue";
import { classFrontStore } from "@/stores/frontData/he/class";

const store = classFrontStore();
const activeIndex = ref("1");
const activeIndex2 = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
</script>
<template>
  <div style="background-color: rgb(228, 228, 228)">
    <div
      style="
        width: 70%;
        margin: 0 auto;
        background-color: rgb(228, 228, 228);
        height: 700px;
        padding-top: 15px;
      "
    >
      <div
        style="width: 70%; background-color: white; height: 610px; float: left"
      >
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router="true"
          style="margin-left: 15px; margin-right: 15px"
        >
          <el-menu-item index="/InCatalogue" class="menu1"
            >课程叙述</el-menu-item
          >
          <el-menu-item index="/InClassInform" class="menu2">目录</el-menu-item>
          <el-menu-item index="/InComment" class="menu3">评论</el-menu-item>
          <!-- <el-sub-menu index="2">
                    <template #title>Workspace</template>
                    <el-menu-item index="2-1">item one</el-menu-item>
                    <el-menu-item index="2-2">item two</el-menu-item>
                    <el-menu-item index="2-3">item three</el-menu-item>
                    <el-sub-menu index="2-4">
                        <template #title>item four</template>
                        <el-menu-item index="2-4-1">item one</el-menu-item>
                        <el-menu-item index="2-4-2">item two</el-menu-item>
                        <el-menu-item index="2-4-3">item three</el-menu-item>
                    </el-sub-menu>
                    </el-sub-menu>
                    <el-menu-item index="3" disabled>Info</el-menu-item> -->
          <!-- <el-menu-item index="4">Orders</el-menu-item> -->
        </el-menu>
        <div style="margin-top: 15px; margin-left: 15px; margin-right: 15px">
          <router-view></router-view>
        </div>
      </div>
      <div
        style="
          width: 25%;
          background-color: white;
          height: 310px;
          float: left;
          margin-left: 20px;
        "
      >
        <div
          style="
            /* outline: 1px solid red; */
            width: 84%;
            height: 60px;
            margin: 0 auto;
            margin-top: 20px;
          "
        >
          <div
            style="
              /* outline: 1px solid red; */
              width: 60px;
              height: 60px;
              float: left;
            "
          ></div>
          <div
            style="
              /* outline: 1px solid red; */
              width: 180px;
              height: 60px;
              float: left;
              margin-left: 13px;
            "
          >
            <div
              style="color: rgb(0, 166, 255); font-size: 14px; margin-top: 5px"
            >
              {{ store.classs[0].teacherInfoVo.name }}老师
            </div>
            <div
              style="
                font-size: 14px;
                margin-top: 14px;
                color: rgb(170, 170, 170);
              "
            >
              {{ store.classs[0].teacherInfoVo.incroduce }}
            </div>
          </div>
        </div>

        <div
          style="
            /* outline: 1px solid red; */
            width: 72%;
            height: 60px;
            margin: 0 auto;
            margin-top: 25px;
          "
        >
          <div
            style="
              /* outline: 1px solid red; */
              width: 31%;
              height: 60px;
              float: left;
              text-align: center;
            "
          >
            <h3 style="margin: 0; font-size: 14px; margin-top: 10px">好评度</h3>
            <h4 style="margin: 0; font-size: 12px; color: gray">
              {{ store.classs[0].teacherInfoVo.rate }}%
            </h4>
          </div>
          <div
            style="
              float: left;
              height: 60px;
              border: 1px solid rgb(184, 184, 184);
            "
          ></div>
          <div
            style="
              /* outline: 1px solid red; */
              width: 31%;
              height: 60px;
              float: left;
              text-align: center;
            "
          >
            <h3 style="margin: 0; font-size: 14px; margin-top: 10px">课程数</h3>
            <h4 style="margin: 0; font-size: 12px; color: gray">
              {{ store.classs[0].teacherInfoVo.accumulatedPlays }}
            </h4>
          </div>
          <div
            style="
              float: left;
              height: 60px;
              border: 1px solid rgb(184, 184, 184);
            "
          ></div>
          <div
            style="
              /* outline: 1px solid red; */
              width: 36%;
              height: 60px;
              float: left;
              text-align: center;
            "
          >
            <h3 style="margin: 0; font-size: 14px; margin-top: 10px">
              学习人次
            </h3>
            <h4 style="margin: 0; font-size: 12px; color: gray">
              {{ store.classs[0].teacherInfoVo.accumulatedPlays }}
            </h4>
          </div>
        </div>

        <div
          style="
            /* outline: 1px solid red; */
            width: 84%;
            height: 120px;
            margin: 0 auto;
            margin-top: 10px;
          "
        >
          {{ store.classs[0].teacherInfoVo.personalIntroduction }}
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.menu1 {
  width: 90px;
}
.menu2 {
  width: 90px;
}
.menu3 {
  width: 90px;
}
</style>
